<template>
  <div ref="devRef" :style="style"  v-show="thisSlotSetting != null ? thisSlotSetting.show : true">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "partition-drag-block",
  props: {
    originalFlex: [Number],
    keyId: String,
    minValue: Number,
    maxValue: Number,
  },
  inject: ["slotSettings", "partitionDragInit"],
  data: () => {
    return {
      thisSlotSetting: null,
      style: ""
    }
  },
  computed: {
    thisSlotSettingComputed(){
      return this.thisSlotSetting;
    },
    windowInfo() {
      const offsetHeight = this.$refs.devRef ? this.$refs.devRef.offsetHeight : undefined;
      const offsetWidth = this.$refs.devRef ? this.$refs.devRef.offsetWidth : undefined;
      return {
        offsetHeight,
        offsetWidth
      }
    }
  },
  watch: {
    slotSettings: {
      handler(val){
        if(val){
          this.thisSlotSetting = val.find(item => item.keyId === this.keyId);
          if(this.thisSlotSetting){
            const flex = this.thisSlotSetting.flex ? this.thisSlotSetting.flex + '%' : this.originalFlex + '%';
            if (this.partitionDragInit.info.flexDirection == "column") {
              this.style = `height:${flex}`
            }else{
              this.style = `width:${flex}`
            }
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
  }
}
</script>

<style></style>